<template>
	<view class="footer-bar">
		<view v-for="(items,index) in list" :key="index" :class="items.current? 'current-img':'other-img'">
			<view class="bar-img" @click="choosePage(items)">
				<image style="width: 100%; height: 100%;" mode="aspectFit" :src="items.img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					img: '/static/images/icon_rcyy_sel@3x.png',
					url: '/pages/backstage/index',
					current: true
				}, {
					img: '/static/images/icon_sjbb@3x.png',
					url: '/pages/data-report/index'
				}, {
					img: '/static/images/icon_wd@3x.png',
					url: '/pages/personal/index'
				}]
			}
		},
		methods: {
			choosePage(item) {
				if (item.current) {
					return false
				} else {
					if (item.url) {
						const _this = this;
						uni.navigateTo({
							url: item.url + '?' + _this.version
						})
					}
				}
			}
		}
	}
</script>

<style>
	.footer-bar {
		width: 100%;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid #E0E0E0;
	}

	.current-img {
		width: 50rpx;
		height: 54rpx;
	}

	.current-img image:after {
		content: "";
		display: table;
		width: 20rpx;
		height: 4rpx;
		background: rgba(51, 51, 51, 1);
		border-radius: 2rpx;
		position: absolute;
		bottom: 0;
		left: calc(50% - 10rpx);
	}

	.bar-img {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.current-img .bar-img {
		width: 50rpx;
		height: 54rpx;
	}

	.other-img,
	.current-img {
		flex: 1;
		display: flex;
		justify-content: center;
	}
</style>
